<!-- 服务、需求列表（根据分类查询） -->
<template>
    <div class="cl-box">
        <div class="cp-container">
            <search-form
                ref="searchForm"
                :type="type"
                :sort-info="sortInfo[type]"
                :default-class-id="type === 'e' ? '9' : ($route.params.class || '')"
                :default-sort-value="type === 'e' ? 'COMPREHENSIVE' : ''"
                @callbackSearch="getListAsync"
            ></search-form>
            <div v-loading="loading" class="cp-container" style="min-height: 300px;">
                <el-row class="cl-row" :gutter="20">
                    <el-col
                        v-for="(item, index) in list"
                        :key="index"
                        :span="type === 's' ? 6 : 8"
                        class="cl-col"
                    >
                        <service-list v-if="type === 's'" :listitem="item"></service-list>
                        <demand-list v-if="type === 'd'" :item="item"></demand-list>
                        <expert-list v-if="type === 'e'" :item="item"></expert-list>
                    </el-col>
                </el-row>
                <div v-if="!loading && total === 0" class="no-data">
                    <span class="icon icon-no-data">
                        <span>暂无服务</span>
                    </span>
                </div>
                <div v-if="total > 0" style="text-align: center; padding: 20px 0;">
                    <el-pagination
                        class="public-page"
                        background
                        :current-page="pageNumber"
                        :page-size="pageSize"
                        :total="total"
                        prev-text="上一页"
                        next-text="下一页"
                        layout="prev, pager, next"
                        @current-change="pageChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Component,
    Vue,
    Prop
} from 'nuxt-property-decorator'
import searchForm from '~/components/common/searchForm.vue'
import serviceList from '~/components/common/servicelist.vue'
import demandList from '~/components/common/demandlist.vue'
import expertList from '~/components/common/expertList.vue'
import {ParmsInfo} from '~/method/institute'
@Component({
    components: {
        searchForm,
        serviceList,
        demandList,
        expertList
    }
})
export default class InstituteNav extends Vue {
    @Prop({
        type: String,
        default: 's'
    })
    type!: string
    @Prop()
    contentKey!: string
    @Prop()
    totalKey!: string
    @Prop({
        type: Number,
        default: 16
    })
    size!: number
    @Prop({
        default: () => {
            return {
                classId: 'classId',
                sort: 'sort',
                sortValue: 'sortField',
                area: 'areaIds',
                keyWord: 'serviceName'
            }
        },
        type: Object
    })
    parmsInfo!: ParmsInfo
    @Prop()
    getListAjax!: any
    sortInfo: any = {
        d: [
            {
                label: '发布时间',
                value: 'publishDate'
            },
            {
                label: '截止时间',
                value: 'biddingDeadline'
            }
        ],
        s: [
            {
                label: '成交量',
                value: 'createDate'
            },
            {
                label: '价格',
                value: 'servicePrice'
            }
        ],
        e: [
            {
                label: '项目数量',
                value: 'SERVICENUM'
            },
            {
                label: '价格',
                value: 'PRICE'
            }
        ]
    }
    loading: boolean = false
    total: number = 0
    list: [] = []
    pageSize: number = this.size
    pageNumber: number = 1
    keyWord: string = ''
    init () {
        const searchForm = (this.$refs.searchForm as any)
        searchForm.callbackSearch()
    }
    pageChange (val: number) {
        this.pageNumber = val
        this.init()
    }
    async getListAsync (json: any = {}) {
        this.loading = true
        const {data}: any = await this.getListAjax(this.setSearchParms(json))
        if (data.flag) {
            this.list = data.data[this.contentKey || 'content']
            this.total = data.data[this.totalKey || 'totalElements']
        } else {
            this.$message.error(data.msg)
        }
        this.loading = false
    }
    setSearchParms (json: any = {}) {
        const parms: any = {
            pageSize: this.pageSize,
            pageNumber: this.pageNumber
        }
        const o = this.parmsInfo
        parms[o.classId] = json.classId || ''
        parms[o.sort] = json.sort || ''
        parms[o.sortValue] = json.sortValue || ''
        if (o.keyWord) {
            parms[o.keyWord] = this.keyWord
        }
        const a = o.area
        if (a) {
            let p = ''
            let c = ''
            const ja = json.area
            if (ja) {
                p = ja.p || ''
                c = ja.c || ''
            }
            if (a.constructor === String) {
                parms[a.toString()] = p + c ? ',' + c : ''
            }
            if (a.constructor === Array) {
                if (a[0]) {
                    parms[a[0]] = p
                }
                if (a[1]) {
                    parms[a[1]] = c
                }
            }
        }
        if (this.type === 'e') {
            parms.expertServiceType = ''
        }
        return parms
    }
    mounted () {
        this.init()
    }
}
</script>

<style lang="scss" scoped>
    .cl-box {
        background-color: #f0f0f0;
        padding: 24px 0;
        .bnr {
            width: 100%;
            height: 200px;
            background-color: $border;
            margin-bottom: 24px;
        }
    }
    .cl-row {
        padding: 14px 0;
        .cl-col {
            padding: 10px 0;
        }
    }
</style>

<style lang="scss">
    .cl-row .containe .content-father {
        margin: 0;
        &:hover {
            margin: 0;
        }
    }
</style>
